<template>
  <div style="">
    <el-card class="main">
      <el-row :gutter="20">
        <el-col
          v-for="(item, index) in itemlist"
          :span="8"
          v-bind:key="index"
          class="animated fadeInUp"
          ><div class="grid-content x">
            <!-- 个人信息区域 -->
            <div class="info">
              <el-avatar
                shape="square"
                :size="40"
                class="headimg"
                fit="fill"
                :src="item.userimg"
              ></el-avatar>

              <span class="username">{{ item.name }}</span>
            </div>
            <!-- 内容区域 -->
            <div class="content">
              {{ item.content }}
            </div>
            <!-- 时间 -->
            <div class="time">
              {{ item.time }}
            </div>
            <div class="operation">
              <!-- <span class="glyphicon glyphicon-thumbs-up icon"></span> -->
              <span
                class="iconfont icon-dianzan icon"
                :class="{ show: item.display }"
                @click="clickdianzan(item.id, item.display, item.dianzan)"
                ><i style="margin-left:5px">{{ item.dianzan }}</i></span
              >
            </div>
          </div></el-col
        >
      </el-row>
    </el-card>
    <el-button
      @click="sendvisible = true"
      class="add iconfont icon-fengzheng

"
      >我要上墙</el-button
    >
    <!-- 发墙 -->

    <!-- 发送内容 -->

    <el-dialog
      title="愛要說出來❤️"
      :visible.sync="sendvisible"
      width="50%"
      :show-close="false"
      :before-close="closedialog"
    >
      <!-- <el-card class="footer"> -->
      <el-input
        type="textarea"
        :rows="3"
        placeholder="有什么表白要告诉墙墙呢？"
        v-model="biaobai.content"
      >
      </el-input>
      <div class="operation1">
        <div class="extra">
          <!-- <span class="expression">表情</span> -->
          <el-popover
            placement="top"
            title="标题"
            width="500"
            height="700"
            trigger="click"
            v-model="emojiShow"
          >
            <el-button slot="reference" class="face">😀</el-button>
            <div class="browBox">
              <ul>
                <li
                  v-for="(item, index) in faceList"
                  :key="index"
                  @click="getBrow(index)"
                >
                  {{ item }}
                </li>
              </ul>
            </div>
          </el-popover>
          <!-- <Face></Face> -->
          <!-- <span class="photo">图片</span> -->
        </div>
        <div class="send" @click="send" :disabled="biaobai.content == ''">
          发送
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// import Face from "../components/facelist.vue";
const appData = require("../assets/faceList.json");

export default {
  data() {
    return {
      itemlist: [],
      biaobai: {
        name: "",
        content: "",
        time: "",
        dianzan: 0,
        comments: 0,
        display: 0,
        userimg: "",
      },
      sendvisible: false,
      //表情框是否展示
      emojiShow: false,
      //表情列表
      faceList: [],
      //表情文本
      getBrowString: "",
    };
  },
  mounted() {
    this.showallbiaobai();
    this.loadEmojis();
  },
  methods: {
    clickdianzan(index, display, zan) {
      console.log(display);
      if (display) {
        display = false;
        this.$message.info("😥取消点赞");
        zan--;
      } else {
        display = true;
        this.$message.success("😁感谢您的点赞~");
        zan++;
      }
      this.$http
        .post("http://localhost:8090/content/biaobaidianzan", {
          id: index,
          display: display,
          dianzan: zan,
        })
        .then((res) => {
          console.log(res);
          this.showallbiaobai();
        });
    },
    showallbiaobai() {
      this.$http("http://localhost:8090/content/biaobaifind").then((res) => {
        console.log(res);

        this.itemlist = res.data;
      });
    },
    loadEmojis() {
      for (let i in appData) {
        this.faceList.push(appData[i].char);
      }
    },
    // 获取用户点击之后的标签 ，存放到输入框内
    getBrow(index) {
      for (let i in this.faceList) {
        if (index == i) {
          this.getBrowString = this.faceList[index];
          this.biaobai.content += this.getBrowString;
        }
      }
      this.emojiShow = false;
    },
    send() {
      let date = new Date();
      let year = date.getFullYear(); // 年
      let month = date.getMonth() + 1; // 月
      let day = date.getDate(); // 日
      let hour = date.getHours(); // 时
      hour = hour < 10 ? "0" + hour : hour; // 如果只有一位，则前面补零
      let minute = date.getMinutes(); // 分
      minute = minute < 10 ? "0" + minute : minute; // 如果只有一位，则前面补零
      let second = date.getSeconds(); // 秒
      second = second < 10 ? "0" + second : second; // 如果只有一位，则前面补零
      this.biaobai.time = `${year}-${month}-${day} ${hour}:${minute}:${second}`;
      this.biaobai.name = window.sessionStorage.getItem("tokenname");
      this.biaobai.userimg = window.sessionStorage.getItem("tokenimg");
      this.$http
        .post("http://localhost:8090/content/publishbiaobai", this.biaobai)
        .then((res) => {
          console.log(res);
          this.biaobai.content = "";
          this.sendvisible = false;
          this.showallbiaobai();
        });
    },
    closedialog(done) {
      this.$confirm("退出将不会保存，是否继续", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          done();
          this.$message({
            type: "info",
            message: "已取消上墙",
          });
        })
        .catch(() => {});
    },
  },
};
</script>
<style scoped>
.el-card {
  width: 1200px;
  /* margin-top: 20px; */
  margin: 0px auto;
  padding: 0;
  background-color: #f2efe8;
  /* padding: 10px; */
}
.el-row {
  /* width: 1000px; */
  margin: 10px auto !important;
  padding: 10px 0;
  height: 530px;
  overflow-y: auto;
  /* background-color: #eee; */
}
.el-col {
  height: 280px;
  margin-bottom: 20px;
}
.show {
  color: rgb(197, 44, 103) !important;
}
.grid-content {
  width: 100%;
  background: url(../assets/image/biaobai2.png);

  height: 100%;
  border-radius: 10px;
  /* border: 1px solid black; */
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.15) !important;
  /* background-color: rgb(109, 108, 108); */
  padding: 10px;
}
.info {
  width: 100%;
  /* background-color: #fff; */
  height: 44px;
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  border-bottom: 1px solid rgb(94, 92, 92);
  padding-bottom: 10px;
}
.headimg {
  width: 40px;
  height: 40px;
  border-radius: 20px;
  margin-right: 10px;
}
.content {
  width: 100%;
  height: 150px;
  /* background-color: #fff; */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 6;
  overflow: hidden;
  text-overflow: ellipsis;
}
.time {
  width: 120px;
  border-top: 1px solid black;
  margin: 5px;
  font-size: 12px;
  /* color: rgb(173, 173, 173); */
  color: rgb(59, 56, 56);

}
.operation {
  margin-top: 10px;
  display: flex;
  justify-content: flex-end;
}
.icon {
  display: inline-block;
  width: 50px;
  /* background-color: #fff; */
  margin-right: 10px;
  text-align: center;
  font-size: 20px;
  cursor: pointer;
  color: rgb(121, 138, 170);
}
.footer {
  background-color: rgba(0, 0, 0, 0.3);
  position: absolute;
  /* display: none; */
  bottom: 0;
  width: 1000px;
  left: 50%;
  margin-left: -500px;
  margin-bottom: 0;
  z-index: 1;
}
/* 底部操作布局 */
.operation1 {
  margin-top: 15px;
  display: flex;
  justify-content: space-between;
  margin-left: 15px;
}
.expression {
  margin-right: 30px;
}
.send {
  cursor: pointer;
  width: 60px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  border-radius: 6px;
  color: white;
  font-size: 12px;
  background-color: #5c6064;
}
.send:hover {
  background-color: #36383a;
}
.title {
  width: 80%;
  height: 40px;
  background-color: #fff;
  text-align: center;
  margin: 10px auto;
}
/* 表情样式 */
.browBox {
  width: 100%;
  height: 200px;
  background: #e6e6e6;
  position: absolute;
  z-index: 100;
  bottom: 0px;
  overflow: scroll;
}
ul {
  display: flex;
  flex-wrap: wrap;
  padding: 10px;
}
li {
  cursor: pointer;
  width: 10%;
  font-size: 26px;
  list-style: none;
  text-align: center;
}

.submit-btn {
  margin: 0 15px 10px 0;
  float: right;
}
/* 表情 */
.face {
  /* width: 10px; */
  padding: 5px;
  background-color: rgb(175, 172, 172);
  margin-right: 20px;
}
.add {
  border-radius: 10px;
  width: fit-content;
  position: fixed;
  bottom: 40px;
  font-size: 16px;
  right: 50px;
  color: white;
  background-color:#d1762f;
}
</style>
